<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <div class="footerBox">
      <div class="footerArea">
        <div class="footerMessage">
          <div
            class="messageItem"
            v-for="(item, index) in MessageList"
            :key="index"
          >
            <div class="title">{{ item.title }}</div>
            <div
              class="otherItem"
              v-for="(ulItem, ulIndex) in item.childList"
              :key="ulIndex"
              v-if="deviceType == 'web' || deviceType == 'ipad'"
            >
              <p>{{ ulItem.text }}</p>
            </div>
          </div>
        </div>
        <div
          class="mobileItem"
          v-for="(mobileItem, mobileIndex) in mobileChildList"
          :key="mobileIndex"
          v-if="deviceType == 'mobile'"
        >
          <p>{{ mobileItem.text }}</p>
        </div>

        <div class="footerCopy" v-if="deviceType == 'mobile'">
          {{ footerCopy }}
        </div>
      </div>
      <div
        class="footerCopy"
        v-if="deviceType == 'web' || deviceType == 'ipad'"
      >
        {{ footerCopy }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "footerBar",
  data() {
    return {
      MessageList: [
        {
          title: "公司資訊",
          childList: [
            {
              text: "台灣安世代科技股份有限公司",
            },
            {
              text: "統一編號：42621451",
            },
            {
              text: "台北服務中心：台北市內湖區康樂街",
            },
            {
              text: "236-6號(三教山清靈宮 中心廣場)",
            },
          ],
        },
        {
          title: "聯絡我們",
          childList: [
            {
              text: "電子信箱：service@anshidai.com ",
            },
            {
              text: "服務手機：0910 696 633 ",
            },
            {
              text: "服務電話：02 2634 5777",
            },
            {
              text: "LINE ",
            },
            {
              text: "FACEBOOK",
            },
          ],
        },
        {
          title: "服務資訊",
          childList: [
            {
              text: "會員資訊",
            },
            {
              text: "合作洽詢",
            },
          ],
        },
        {
          title: "法律聲明",
          childList: [
            {
              text: "法律聲明",
            },
            {
              text: "隱私權政策",
            },
          ],
        },
      ],
      mobileChildList: [
        {
          text: "台灣安世代科技股份有限公司",
        },
        {
          text: "統一編號：42621451",
        },
        {
          text: "台北服務中心：台北市內湖區康樂街",
        },
      ],
      footerCopy: "Copyright © 2024 anshidai.com 保留一切權利。",
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "~@/assets/viewCss/footer/footer.scss";
</style>